<template>
  <!--材料价格查询-->
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24" class="small-search">
          <a-col :xl="6" :lg="8" :md="8" :sm="24" style="margin-bottom: -8px">
            <a-form-item label="课程" :wrapperCol="wrapperCol" :labelCol="labelCol">
              <a-select v-model="courseId" placeholder="请选择课程">
                <a-select-option v-for="(item, inx) in this.courseList" :key="inx" :value="item.id">
                  {{ item.courseName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden; margin: 2px 4px" class="table-page-search-submitButtons">
              <!-- <a-button type="primary" @click="handleExportXls30('PurchaseStatistics')">导出到excel</a-button> -->
              <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 8px">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
    <div>
      <div id="myChart" style="height: 400px" class="MpriceImage-table"></div>
    </div>

    <grand-list ref="modalForm" @ok="modalFormOk"> </grand-list>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { httpAction, getAction } from '@/api/manage'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
// 引入基本模板
import * as echarts from 'echarts/lib/echarts'
// // 引入基本模板
// let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/chart/line')
require('echarts/lib/component/toolbox')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/grid')

// Vue.prototype.$echarts = echarts //引入组件
export default {
  mixins: [JeecgListMixin, mixinDevice],
  data() {
    return {
      dateFormat: 'YYYY-MM-DD',
      examTime: '',
      courseId: '',
      description: '',
      courseList: [],
      maxScore: '',
      minScore: '',
      avgScore: '',
      value: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      modalWidth: 1000,
      // 表头
      columns: [],
      url: {
        courseURL: '/grand/course/list',
        list: '/grandForm/getCourseScore',
      },
    }
  },
  created() {
    this.getCourseList()
  },

  computed: {},
  methods: {
    getCourseList() {
      console.log('函数调用' + this.url.courseURL)
      getAction(this.url.courseURL).then((res) => {
        if (res.code == 200) {
          console.log('111' + res.result.records)
          this.courseList = res.result.records
        }
      })
    },
    //重置搜索
    searchReset() {
      this.queryParam = {}
      this.loadData1(1)
    },
    //搜索
    searchQuery() {
      if (this.courseId == '') {
        console
        alert('请选择课程')
        return
      }

      this.loadData1(1)
    },

    echarts1(xData, yData) {
      var chartDom = document.getElementById('myChart');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: 'category',
          data: xData,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: yData,
            type: 'line',
            smooth: true,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    loadData1() {
      getAction(this.url.list, {
        courseId: this.courseId,
      }).then((res) => {
        console.log(res.success)
        if (res.success) {
          let xData = []
          let yData = []

          console.log('测试测试' + res.result.length)
          for (let i = 0; i < res.result.length; i++) {
            xData.push(res.result[i].examTime)
            yData.push(res.result[i].score)
          }
          console.log("dd"+yData)
          this.echarts1(xData, yData)
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    initDictConfig() {},
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
<style lang="less" scoped>
//合计行样式
.date-totals {
  font-size: 17px;
  font-weight: 600;
  margin: 0 20px;
  margin-bottom: -4px;
  margin-top: 2px;
  span:not(:first-child) {
    margin-right: 20px;
  }
}
//搜索区域缩小
/deep/ .small-search {
  .ant-col .ant-form-item {
    margin-bottom: 6px;
  }
}
// /deep/ .ant-table-scroll .ant-table-fixed .ant-table-thead{
// position: relative;
// }
// /deep/ body{
//   ::-webkit-scrollbar {
//     position: absolute;
//     top: 0;
//     width: 8px;
//     height: 8px;
// }

// ::-webkit-scrollbar-corner {
//     background: #f82b2b;
// }
// ::-webkit-scrollbar-thumb {
//     background: #292828;
//     border-radius: 2px;
// }
// ::-webkit-scrollbar-track {
//     background: #f6f6f6;
//     border-radius: 2px;
// }
// }
</style>



